<template>
  <div id="factorNewsMore">
    <mt-header fixed :title="title" v-if="isHeader">
      <mt-button icon="back" slot="left" @click="goBack"></mt-button>
    </mt-header>
    <my-search fixed v-model="value" show="show" type="type2" placeholder="请输入因子名称" class="search-input"
               :class="isHeader?'isHeader':''">
      <div class="search-cont" v-if="value">
        <div class="s-factor" :class="item.isSelect?'sel_bg':'org_bg'" v-for="item in searchFactors"
             @click="selectFactor(item)">
          {{item.factor_name}}
        </div>
      </div>
      <div class="search-cont" v-if="value?show=false:show=true">
        <!--搜索前显示最新前10因子-->
        <div class="s-factor" :class="item.isSelect?'sel_bg':'org_bg'" v-for="item in newTen"
             @click="selectFactor(item)">
          {{item.factor_name}}
        </div>
      </div>
    </my-search>
  </div>
</template>

<script>
  import REQUEST from './../services/test'

  export default {
    name: 'factorNewsMore',
    data() {
      return {
        isHeader: false,
        value: '',
        title: '',
        show: true,
        searchFactors: [],
        newTen: []
      }
    },
    created() {
      this.$store.commit('getUrlParams')
      this.$store.dispatch('isAllFactors')
      this.isHeader = this.$store.state.isHeader
    },
    mounted() {
//      this.getHotTypeFactors(this.$route.query.type)
      this.getAllFactorsTypeFactors(this.$route.query.type)
    },
    watch: {
      value(n, o) {
        if (n && n !== o) {
          this.getSearchList(n)
        }
      }
    },
    methods: {
      goBack: function () {
        history.back()
//        this.$router.go(-1)
      },
      // 选中或未选中因子状态
      selectFactor: function (_item) {
        _item.isSelect = !_item.isSelect
        if (_item.isSelect) {
          this.addFactor(_item)
        } else {
          this.delFactor(_item)
        }
      },
      // 添加因子
      addFactor(_item) {
        this.$store.commit('pushSelectFactor', _item)
        this.$router.replace({name: 'factorSortsMore', query: {type: _item.factor_type}})
      },
      // 删除选中因子
      delFactor(_item) {
        this.$store.commit('removeSelectFactor', _item)
      },
      getSearchList(_val) {
        let _self = this
        REQUEST.searchAllFactors(_val).then(res => {
          // console.log('searchAllFactors', res)
          let _arr = []
          if (res.length > 0) {
            res.forEach(v => {
              _arr.push(v.factor_id)
            })
          }
          let _allFactors = _self.$store.state.allFactors
          let _factorId = _arr.join('|')
          _self.searchFactors = _allFactors.filter(v => {
            return _factorId.indexOf(v.factor_id) > -1
          })
        })
      },
      // 获取类型因子
      getHotTypeFactors(_type) {
        let _self = this
        REQUEST.getHotTypeFactors(_type).then(res => {
          // console.log('重新请求--------getHotTypeFactors', res)
          let _arr = []
          if (res.length > 0) {
            res.forEach(v => {
              _arr.push(v.factor_id)
            })
          }
          let _allFactors = _self.$store.state.allFactors
          let _factorId = _arr.join('|')
          _self.newTen = _allFactors.filter(v => {
            return _factorId.indexOf(v.factor_id) > -1
          })
        })
      },

      // 获取类型因子
      getAllFactorsTypeFactors(_type) {
        let _self = this
        let _allFactors = _self.$store.state.allFactors
        _self.newTen = _allFactors.filter(v => {
          return v.factor_type.indexOf(_type) > -1
        })
      }
    },
    computed: {
      filterItems() {
        let value = this.value
        let items = this.newFactors
        return items.filter((v) => {
          return Object.keys(v).some(function (key) {
            return String(v[key]).toLowerCase().indexOf(value) > -1
          })
        })
      },
      search() {
        let value = this.value
        let searchFactors = this.searchFactors
        this.getSearchList(value)
        return searchFactors
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
  #factorNewsMore {
    background: #f8f8f8;
    .mint-header.is-fixed {
      background-color: #0f1316;
    }
    .search-input.isHeader {
      margin-top: 1.25rem !important;
    }
    .org_bg {
      border: 1px solid #f7f7f7 !important;
      color: #4f4f4f !important;
      background: #f7f7f7 !important;
    }
    .sel_bg {
      border: 1px solid #1296db !important;
      color: #1296db !important;
      background: #ffffff !important;
    }
    .search-input {
      position: fixed;
      width: 100%;
      /*margin-top: 1.25rem;*/
      background: #ffffff;
      .mint-search-list-warp{
        .search-cont{
          overflow: hidden;
        }
      }
      .search-cont {
        margin-top: 1.25rem;
        .s-factor {
          width: auto;
          padding: 0.1066667rem 0.16rem;
          background: #f7f7f7;
          float: left;
          color: #4f4f4f;
          margin: 0.1066667rem 0.1066667rem;
          border-radius: 0.1066667rem;
        }
      }
    }
    .pick-cont {
      margin-top: 1.25rem;
    }
  }
</style>
